<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Quiz Assistant 测试页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .question {
      margin-bottom: 30px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    .questionTypeTitle___abc {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .questionPart___xyz {
      margin-bottom: 15px;
    }
    .answerWrap___123 {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    label {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    input[type="checkbox"], input[type="radio"] {
      margin-right: 10px;
    }
    .font16 {
      font-size: 16px;
    }
    .fillInput___456 {
      width: 200px;
      padding: 5px;
      margin: 5px 0;
    }
    .next-btn {
      background-color: #165DFF;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
    #status {
      position: fixed;
      top: 10px;
      right: 10px;
      padding: 10px;
      background-color: #f0f0f0;
      border-radius: 4px;
      max-width: 300px;
    }
  </style>
</head>
<body>
  <h1>AI Quiz Assistant 测试页面</h1>
  <p>这是一个用于测试 AI Quiz Assistant 扩展的页面，模拟了教育平台的题目结构。</p>
  
  <div id="status">
    <h3>扩展状态</h3>
    <div id="status-content">未连接</div>
  </div>
  
  <div id="question-container">
    <!-- 单选题 -->
    <div class="question" id="question1">
      <div class="questionTypeTitle___abc">【单选题】</div>
      <div class="questionPart___xyz">
        1. 下列关于SQL语言的描述中，错误的是（ ）
        <br>A. SQL语言是一种结构化查询语言
        <br>B. SQL语言是一种非过程化语言
        <br>C. SQL语言是关系数据库的标准语言
        <br>D. SQL语言必须由程序员用高级语言实现
      </div>
      <div class="answerWrap___123">
        <label>
          <input type="radio" name="q1" value="A">
          <span class="font16">A</span>
        </label>
        <label>
          <input type="radio" name="q1" value="B">
          <span class="font16">B</span>
        </label>
        <label>
          <input type="radio" name="q1" value="C">
          <span class="font16">C</span>
        </label>
        <label>
          <input type="radio" name="q1" value="D">
          <span class="font16">D</span>
        </label>
      </div>
    </div>
    
    <!-- 多选题 -->
    <div class="question" id="question2" style="display: none;">
      <div class="questionTypeTitle___abc">【多选题】</div>
      <div class="questionPart___xyz">
        2. 以下哪些是JavaScript的基本数据类型（ ）
        <br>A. String
        <br>B. Number
        <br>C. Object
        <br>D. Boolean
      </div>
      <div class="answerWrap___123">
        <label>
          <input type="checkbox" name="q2" value="A">
          <span class="font16">A</span>
        </label>
        <label>
          <input type="checkbox" name="q2" value="B">
          <span class="font16">B</span>
        </label>
        <label>
          <input type="checkbox" name="q2" value="C">
          <span class="font16">C</span>
        </label>
        <label>
          <input type="checkbox" name="q2" value="D">
          <span class="font16">D</span>
        </label>
      </div>
    </div>
    
    <!-- 填空题 -->
    <div class="question" id="question3" style="display: none;">
      <div class="questionTypeTitle___abc">【填空题】</div>
      <div class="questionPart___xyz">
        3. JavaScript中创建变量的关键字有________、________和________。
      </div>
      <div>
        <input class="fillInput___456" type="text" placeholder="填空1">
        <input class="fillInput___456" type="text" placeholder="填空2">
        <input class="fillInput___456" type="text" placeholder="填空3">
      </div>
    </div>
    
    <!-- 判断题 -->
    <div class="question" id="question4" style="display: none;">
      <div class="questionTypeTitle___abc">【判断题】</div>
      <div class="questionPart___xyz">
        4. HTML5是最新的HTML标准。
      </div>
      <div class="answerWrap___123">
        <label>
          <input type="radio" name="q4" value="true">
          <span class="font16">正确</span>
        </label>
        <label>
          <input type="radio" name="q4" value="false">
          <span class="font16">错误</span>
        </label>
      </div>
    </div>
  </div>
  
  <button class="next-btn" onclick="nextQuestion()">下一题</button>
  
  <script>
    // 当前题目索引
    let currentQuestionIndex = 1;
    const totalQuestions = 4;
    
    // 显示下一题
    function nextQuestion() {
      // 隐藏当前题目
      document.getElementById(`question${currentQuestionIndex}`).style.display = 'none';
      
      // 更新题目索引
      currentQuestionIndex = currentQuestionIndex % totalQuestions + 1;
      
      // 显示下一题
      document.getElementById(`question${currentQuestionIndex}`).style.display = 'block';
    }
    
    // 模拟扩展状态更新
    function updateStatus(message) {
      document.getElementById('status-content').innerHTML = message;
    }
    
    // 初始化
    window.addEventListener('load', () => {
      document.getElementById('question1').style.display = 'block';
      
      // 检查扩展是否已加载
      if (window.chrome && chrome.runtime && chrome.runtime.onMessage) {
        updateStatus('扩展已加载');
        
        // 监听来自扩展的消息
        chrome.runtime.onMessage.addListener((message) => {
          if (message.type === 'log') {
            updateStatus(`日志: ${message.data}`);
          } else if (message.type === 'questionUpdate') {
            updateStatus(`处理题目: ${message.data.type}<br>答案: ${message.data.answer}`);
          }
        });
      } else {
        updateStatus('扩展未加载');
      }
    });
  </script>
</body>
</html> 